<template>
  <div class="data">
    <!-- <div class="data-top">
        <span>欢迎使用《问卷调查》实时采集</span>
        <img class="data-top-avatar" src="../assets/avatar.png"/>
      </div> -->
    <el-row type='flex' class="data-search" justify='end' align="middle">

      <!-- <el-col> -->
      <el-input class="key-input" v-model="serachData.keyword" placeholder="请输入关键词"></el-input>
      <el-button type="primary" size="mini" style="margin-left: 10px" @click="getData()">查询
      </el-button>
      <el-button type="primary" size="mini" style="margin-right:20px" @click="addModal()">+ 新增
      </el-button>
      <!-- </el-col>
      <el-col >

      </el-col> -->
      <!-- <el-col class="col-item3">
        <div class="clock-btn" size="mini">自动刷新</div>
        <div class="clock-btn2 " @click="changeClick(true)" :class="tixing? 'clockon-btn':''" size="mini">开</div>
        <div class="clock-btn3 " @click="changeClick(false)" :class="!tixing? 'clockon-btn':''" size="mini">关</div>
      </el-col>
      <el-col class="col-item4">
        <i class="el-icon-message-solid" @click="changeMsg(!msgStatus)"
          :style="msgStatus?'color:#1ABC9C':'color:#fff'"></i>
      </el-col> -->
    </el-row>
    <el-table :data="tableData" border ref="table" :height="tableHeight" :row-key="getRowKeys" v-loading="loading"
      :expand-row-keys="expands" @cell-click="cellClick" @expand-change="exChange" style="width: 100%">
      <el-table-column width="1" class="data-desc" type="expand">
        <template slot-scope="props">
          <el-descriptions :column="1" size="medium" border labelStyle="width: 120px;text-align: center">
            <el-descriptions-item>
              <template slot="label">
                问卷内容
              </template>
              <div style="display: flex;justify-content: space-around;color: #1ABC9C">
                <div style="width: calc(100% - 130px);color: #1ABC9C">
                  <p>{{props.row.title}}</p>
                </div>
                <span style="display: block;
                            color: rgb(64, 158, 255);
                            height: 100%;
                            width: auto;
                              border-bottom:1px solid  #1ABC9C;
                            margin: auto 0;
                            color: #1ABC9C;
                            text-align: center;" @click="seccendCopy(props.row.title)">复制</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item v-if="props.row.type==='rg'">
              <template slot="label">
                问卷备注
              </template>
              <div style="display: flex;justify-content: space-around">
                <div style="width: calc(100% - 130px);color: #1ABC9C;">
                  <p v-if="props.row.recommend === null">暂无备注</p>
                  <p v-else>{{props.row.recommend}}</p>
                </div>
                <span style="display: block;
                      color: #1ABC9C;
                      height: 100%;
                      margin: auto 0;
                    border-bottom:1px solid  #1ABC9C;
                      text-align: center;" @click="seccendCopy(props.row.descc)">复制</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item v-if="props.row.type!=='rg'">
              <template slot="label">
                问卷原文
              </template>
              <span v-if="props.row.show" style="color: #1ABC9C;padding-left: 30px;"
                @click="props.row.show = !props.row.show">点击查看原文</span>
              <div v-if="!props.row.show" style="display: flex;justify-content: space-around">
                <div style="width: calc(100% - 130px);color: #1ABC9C;">
                  <p>{{props.row.descc}}</p>
                </div>
                <span style="display: block;
                      color: #1ABC9C;
                      height: 100%;
                      margin: auto 0;
                    border-bottom:1px solid  #1ABC9C;
                      text-align: center;" @click="seccendCopy(props.row.descc)">复制</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                {{props.row.type==='rg'?'问卷链接':'发布链接'}}

              </template>
              <div style="display: flex;justify-content: space-around;color: #1ABC9C;">
                <div style="width: calc(100% - 130px);">
                  <p>{{props.row.link}}</p>
                </div>
                <span style="display: block;
                             height: 100%;
                            width: auto;
                            color: #1ABC9C;
                             border-bottom:1px solid  #1ABC9C;
                              text-align: center;" @click="seccendCopy(props.row.link)">复制</span>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column label="问卷内容" min-width="600" header-align="center" prop="title">
        <template slot-scope="scope">
          <div style="width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
            <span>{{scope.row.title}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="来源" min-width="80" align="center" prop="type">
        <template slot-scope="scope">
          <div>{{findData('label',scope.row.type)}}</div>
          <div>{{findData('value',scope.row.type)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" min-width="80" align="center" prop="是否推荐">
        <template slot-scope="scope">
          <!--                <span style="margin-left: 10px">-->
          <!--                  <el-tag v-if="scope.row.isGood === 0">普通</el-tag>-->
          <!--                  <el-tag type="danger" v-if="scope.row.isGood === 1">推荐</el-tag>-->
          <!--                </span>-->
          <div @click="toogleExpand(scope.row)" style="width: 100%">
            <span>
              <el-button :class="rowData?.id===scope.row.id?'tag3':'tag1'" size="small" v-if="scope.row.isGood === 0">普通
              </el-button>
              <el-button :class="rowData?.id===scope.row.id?'tag4':'tag2'" size="small" v-if="scope.row.isGood===1">推荐
              </el-button>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" min-width="140" align="center" :show-overflow-tooltip="true" prop="pubdate">
      </el-table-column>
      <el-table-column label="采集时间" min-width="140" align="center" :show-overflow-tooltip="true" prop="createTime">
      </el-table-column>
      <el-table-column label="操作" align="center" width="180px" prop="type">
        <template slot-scope="scope">
          <el-button :class="rowData?.id===scope.row.id?'tag3':'tag1'" type="primary" size="small"
            style="margin-left: 10px" @click="openModal(scope.row)">修改
          </el-button>
          <el-button :class="rowData?.id===scope.row.id?'tag4':'tag2'" type="primary" size="small"
            style="margin-left: 10px" @click="deleteModal(scope.row)">删除
          </el-button>
          <!-- <span class="search-text" @click="tiaozhuan(scope.row)">查询</span> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%" class="pagination-box">
      <!-- <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size"
        layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination> -->
      <el-pagination background="#1ABC9C" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="(addStatus?'新增':'修改') +'人工筛选'" size="mini" width="500px" center
      :visible.sync="adddialogFormVisible">
      <el-form size="mini" :rules="rules" :model="AddUserForm" label-width="auto" ref="AddUserForm">
        <el-form-item label="问卷内容" label-width="auto" prop="title">
          <el-input type="textarea" autosize placeholder="请输入问卷内容" v-model="AddUserForm.title"></el-input>
        </el-form-item>
        <el-form-item label="问卷备注" label-width="auto" prop="recommend">
          <el-input type="textarea" autosize placeholder="请输入问卷备注" v-model="AddUserForm.recommend"></el-input>
        </el-form-item>
        <el-form-item label="问卷地址" label-width="auto" prop="link">
          <el-input placeholder="请输入问卷地址" v-model="AddUserForm.link"></el-input>
        </el-form-item>

        <el-form-item label="状态" label-width="auto" prop="isGood">
          <el-radio v-model="AddUserForm.isGood" label="0">普通</el-radio>
          <el-radio v-model="AddUserForm.isGood" label="1">推荐</el-radio>
        </el-form-item>
        <el-form-item prop="expressDate" label="发布时间" value-format-="yyyy-MM-dd" label-width="auto">
          <el-date-picker disabled v-model="AddUserForm.addTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="expressDate" label="采集时间" value-format-="yyyy-MM-dd" label-width="auto">
          <el-date-picker disabled v-model="AddUserForm.createTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="addStatus" @click="addUserForm('AddUserForm')">新增</el-button>
          <el-button type="primary" v-if="!addStatus" @click="updateUserForm('AddUserForm')">修改</el-button>
          <el-button @click="resetForm('AddUserForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import mp3 from "../../public/1.mp3"
  export default {
    data () {
      return {
        loading: true,
        audio: null,
        total: 0,
        updateData: {
          type: 'rg',
          isGood: '-1',
          keyword: ''
        },
        tixing: true,
        serachData: {
          type: 'rg',
          isGood: '-1',
          keyword: ''
        },
        options: [
          { label: '全部', value: 'all' },
          { label: '脸书', value: 'face' },
          { label: '推特', value: 'twit' },
          { label: '红迪', value: 'redd' },
          { label: '领英', value: 'ly' },
        ],
        optionEng: [
          { label: '人工', value: 'rg', eng: 'Rengong' },
          // { label: '脸书', value: 'face', eng: 'Facebook' },
          { label: '推特', value: 'twit', eng: 'Twitter' },
          { label: '领英', value: 'ly', eng: 'LinkedIn' },
          { label: '红迪', value: 'redd', eng: 'Reddit' },

        ],
        isGoodList: [
          { label: '仅看推荐', value: '1', eng: '' },
          { label: '查看全部', value: '-1', eng: '' }
        ],

        isGood: [
          { label: '全部', value: '-1' },
          { label: '推荐', value: '1' }
        ],
        sourseText: {

        },
        AddUserForm: {
          title: '',
          recommend: '',
          link: "",
          isGood: '0',
          addTime: new Date().getTime(),
          createTime: new Date().getTime(),
          pubdate: new Date().getTime(),

        },
        tableData: [],
        currentPage: 1,
        size: 10,
        // 定时器
        timer: null,
        pollingST: null,
        tag: true,
        expands: [],//只展开一行放入当前行id
        getRowKeys: (row) => {//获取当前行id

          return row.id   //这里看这一行中需要根据哪个属性值是id
        },
        tableHeight: "", //表格高度
        msgStatus: true,
        sourceIndex: null,
        recommendIndex: null,
        rowData: null,
        adddialogFormVisible: false,
        addStatus: true
      }
    },
    created () {

      this.getTableHeight();
    },
    mounted () {

      let _this = this;
      window.onresize = () => {
        if (_this.resizeFlag) {
          clearTimeout(_this.resizeFlag);
        }
        _this.resizeFlag = setTimeout(() => {
          _this.getTableHeight();
          _this.resizeFlag = null;
        }, 100);
      };
    },
    methods: {
      //获取表格高度
      getTableHeight () {
        let tableH = 210; //距离页面下方的高度
        let tableHeightDetil = window.innerHeight - tableH;
        if (tableHeightDetil <= 200) {
          this.tableHeight = 200;
        } else {
          this.tableHeight = window.innerHeight - tableH;
          this.size = Math.floor(this.tableHeight / 60)
        }
        this.getData()
      },
      cellClick (row, column) {
        console.log(row, column)
        if (column.label === '问卷内容') {
          this.toogleExpand(row)
        }
      },
      addModal () {
        this.addStatus = true
        this.adddialogFormVisible = true
      },
      openModal (row) {
        this.addStatus = false
        console.log(row)

        this.adddialogFormVisible = true
        this.AddUserForm.id = row.id,
          this.AddUserForm.title = row.title,
          this.AddUserForm.recommend = row.recommend,
          this.AddUserForm.link = row.link,
          this.AddUserForm.createTime = row.createTime,
          this.AddUserForm.addTime = row.addTime,
          this.AddUserForm.isGood = row.isGood.toString()

      },
      deleteModal (row) {

        this.$confirm('是否确定删除该条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.axios.post(this.baseUrl + 'rengong/delete?id=' + row.id)
            .then(res => {
              var data = res.data
              console.log(data)
              if (data.code !== 200) {
                this.$message.error(data.msg);
              } else {
                this.$message.success(data.msg);
              }

              this.getData()
            })
            .catch(err => {
              console.log(err)
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addUserForm (e) {
        this.$refs[e].validate((valid) => {

          if (valid) {
            this.axios.post(this.baseUrl + 'rengong/add', this.AddUserForm)
              .then(res => {
                var data = res.data
                console.log(data)
                if (data.code !== 200) {
                  this.$message.error(data.msg);
                } else {
                  this.$message.success(data.msg);
                }
                this.$refs[e].resetFields();
                this.adddialogFormVisible = false
                this.getData()
              })
              .catch(err => {
                console.log(err)
              })
          }
        })
      },
      updateUserForm (e) {
        this.$refs[e].validate((valid) => {
          this.AddUserForm.createTime = ''
          console.log(this.AddUserForm,123)
          if (valid) {
            this.axios.post(this.baseUrl + 'rengong/update', this.AddUserForm)
              .then(res => {
                var data = res.data
                console.log(data)
                if (data.code !== 200) {
                  this.$message.error(data.msg);
                } else {
                  this.$message.success(data.msg);
                }
                this.$refs[e].resetFields();
                this.adddialogFormVisible = false
                this.getData()
              })
              .catch(err => {
                console.log(err)
              })
          }
        })
      },

      resetForm (formName) {
        this.$refs[formName].resetFields();
        this.adddialogFormVisible = false
      },
      findData (type, data) {
        let one = this.optionEng.find(v => {
          return v.value === data
        })
        if (type === 'label') return one.label
        if (type === 'value') return one.eng
      },
      changeOption (e, f, g) {

        console.log(e, f, g)
        if (e) {
          this.serachData.isGood = -1
          this.recommendIndex = null
          this.serachData.type = f
          this.sourceIndex = this.sourceIndex === g ? null : g

        } else {
          this.serachData.type = 'all'
          this.sourceIndex = null
          this.serachData.isGood = f
          this.recommendIndex = this.recommendIndex === g ? null : g
        }
        console.log(this.recommendIndex)
        this.getData()
      },
      changeClick (type) {
        console.log(type)
        if (type) {
          this.tixing = true
        } else {
          this.tixing = false
        }
        this.flush()
      },
      changeMsg (type) {
        if (type) {
          this.msgStatus = true
        } else {
          this.msgStatus = false
        }
      },
      seccendCopy (str) {
        var that = this
        this.$copyText(str).then(
          function () {
            that.$message({
              message: '复制成功',
              type: 'success'
            });
          },
          function () {

          })
      },
      tiaozhuan (e) {
        window.open(e.link)
        console.log(e)
      },
      exChange (row, rowList) {

        var that = this
        if (rowList.length) { // 只展开一行//说明展开了
          that.expands = []
          if (row) {
            that.expands.push(row.id)// 只展开当前行id
          }
          //  this.tablaData(row.eqId)  这里可以调用接口数据渲染
        } else { // 说明收起了
          that.expands = []
        }
      },
      flush () {
        let that = this
        // 数据刷新事件
        if (this.tixing) {
          this.timer = setInterval(() => {
            if (this.tag) {
              // 向服务器询问是否有新数据？
              this.axios.get(this.baseUrl + 'contentData/havenew?'
                + 'type=' + this.updateData.type
                + '&isGood=' + this.updateData.isGood
                + '&keyword=' + this.updateData.keyword
                + '&total=' + this.total
              )
                .then(res => {
                  if (res.data) {
                    this.getData()
                    if (that.msgStatus) {
                      this.audio = new Audio();
                      this.audio.src = mp3;
                      this.audio.loop = false
                      this.audio.play();
                    }
                  }
                })
            }
          }, 3000)
        } else {
          clearInterval(this.timer);
          this.timer = null;
        }

      },

      // 自定已展开行事件
      toogleExpand (row) {
        console.log(row)
        console.log(row === this.rowData)
        if (row === this.rowData) {
          this.rowData = null
        } else {
          this.rowData = row

        }
        let $table = this.$refs.table;

        $table.toggleRowExpansion(row)
      },
      handleCurrentChange (e) {
        this.currentPage = e
        this.getData();
      },
      handleSizeChange (e) {
        this.size = e
        this.currentPage = 1
        this.getData();
      },
      getData () {
        this.loading = true
        this.tag = false
        // 将数据存到自动刷新参数列表
        this.updateData = this.serachData
        this.axios.get(this.baseUrl + 'contentData/getAll?page=' + this.currentPage
          // this.axios.get(this.baseUrl+'contentData/getAllAdmin?page=' +this.currentPage
          + '&size=' + this.size
          + '&type=' + this.serachData.type
          + '&isGood=' + this.serachData.isGood
          + '&keyword=' + this.serachData.keyword
        )
          .then(res => {
            var data = res.data

            if (data.code === 401) {
              this.$message.error(data.msg);
            }
            else {
              for (var i = 0; i < data.data.records.length; i++) {
                data.data.records[i].pubdate = this.$moment(data.data.records[i].pubdate).format('YYYY-MM-DD HH:mm:ss')
                data.data.records[i].createTime = this.$moment(data.data.records[i].createTime).format('YYYY-MM-DD HH:mm:ss')
                data.data.records[i].show = true

                // if (data.data.records[i].type === 'face') {
                //   data.data.records[i].type = '脸书'
                // }
                // else if (data.data.records[i].type === 'twit') {
                //   data.data.records[i].type = '推特'
                // }
                // else if (data.data.records[i].type === 'redd') {
                //   data.data.records[i].type = '红迪'
                // } else if (data.data.records[i].type === 'ly')
                //   data.data.records[i].type = '领英'
              }
              this.tableData = data.data.records
              this.currentPage = data.data.current
              this.total = data.data.total
              this.size = data.data.size
              console.log(res)

              this.tag = true
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>
<style>

</style>
